<template>
    <div class="cl-secondary-nav">
        <cl-button
          v-for="(r, i) in data"
          :key="'SecondaryNav' + i"
          size="medium"
          :shadow="true"
          :focus="current === i"
          @click="handleClick(i)">{{ r }}</cl-button>
    </div>
</template>

<script>
export default {
    name: 'ClSecondaryNav',
    props: {
        data: Array,
        init: Number
    },
    data() {
      return {
          current: 0
      }
    },
    mounted() {
      if (this.init) this.current = this.init
    },
    methods: {
        handleClick(i) {
            this.current = i
            this.$emit('click', i)
        }
    },
    watch: {
        init() {
            this.current = this.init
        }
    }
}
</script>

<style lang="less" scoped>
    .cl-button+.cl-button {
        margin-left: 20px;
    }

    .cl-secondary-nav {
        display: flex;
        align-items: center;

        padding: 14px 6px;
    }
</style>
